<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程图展示</title>
    <script src="https://unpkg.com/@dreamof2080/flow-view"></script>
    <style>
        body {
            margin: 0;
        }
        #container {
            width: 100%;
            height: 100vh;
            background-color: #000000cf;
            opacity: 0.8;
            overflow: hidden;
        }

        #thumbnail {
            position: absolute;
            overflow: hidden;
            right: 0;
            bottom: 0;
            width: 200px;
            height: 140px;
            background: rgb(191, 191, 191);
            opacity: 0.8;
        }
        #nodeInfo {
            position: absolute;
            width: 200px;
            height: 100px;
            background-color: #000000;
            opacity: 0.8;
            display: none;
            border-radius: 5px;
        }
        #nodeInfo p {
            font-size: 12px;
            color: #FFFFFF;
            margin-left: 20px
        }
        .edge-flow-style {
            stroke-dasharray: 8;
            animation: dash 0.5s linear;
            animation-iteration-count: infinite;
        }

        @keyframes dash {
            to {
                stroke-dashoffset: -16;
            }
        }
        .version {
            position: absolute;
            left: 0;
            top: 0;
            color: #e2dbdb;
            padding: 5px;
            z-index: 10;
        }
    </style>
</head>
<body>
<div class="version">
    <span>当前版本：V1</span>
</div>
<div id="container">

</div>
<div id="thumbnail">

</div>
<div id="nodeInfo">
    <p>未查看：<span id="node-unview">11</span></p>
    <p>未提交：<span id="node-unsubmit">11</span></p>
    <p>已提交：<span id="node-submitted">11</span></p>
</div>

<script>
    const data = `
    <mxGraphModel>
        <root>
            <mxCell id="0" />
            <mxCell id="1" parent="0" />
            <mxCell id="ff8080817719a82b01771ef750e800f4" value="1.开始" style="startNode" parent="1" vertex="1">
                <mxGeometry x="200" y="330" width="64" height="64" as="geometry" />
            </mxCell>
            <mxCell id="ff8080817719a82b0177227a312c0123" value="节点4" style="activityNode" parent="1" vertex="1">
                <mxGeometry x="540" y="220" width="100" height="48" as="geometry" />
            </mxCell>
            <mxCell id="ff8080817719a82b0177227a31480125" value="节点5" style="activityNode" parent="1" vertex="1">
                <mxGeometry x="810" y="338" width="100" height="48" as="geometry" />
            </mxCell>
            <mxCell id="ff8080817719a82b0177227a31560126" value="节点3" style="activityNode" parent="1" vertex="1">
                <mxGeometry x="360" y="220" width="100" height="48" as="geometry" />
            </mxCell>
            <mxCell id="ff8080817719a82b0177227a319a012b" value="" parent="1" source="ff8080817719a82b0177227a31560126" target="ff8080817719a82b0177227a312c0123" edge="1">
                <mxGeometry relative="1" as="geometry" />
            </mxCell>
            <mxCell id="ff8080817719a82b0177227a31a5012c" value="" parent="1" source="ff8080817719a82b0177227a312c0123" target="ff8080817719a82b0177227a31480125" edge="1">
                <mxGeometry relative="1" as="geometry">
                    <Array as="points">
                        <mxPoint x="860" y="240" />
                    </Array>
                </mxGeometry>
            </mxCell>
            <mxCell id="ff8080817719a82b0177227a31610127" value="0.归档" style="endNode" parent="1" vertex="1">
                <mxGeometry x="1020" y="330" width="64" height="64" as="geometry" />
            </mxCell>
            <mxCell id="ff8080817719a82b0177227a31ba012e" value="" parent="1" source="ff8080817719a82b0177227a31480125" target="ff8080817719a82b0177227a31610127" edge="1">
                <mxGeometry relative="1" as="geometry" />
            </mxCell>
            <mxCell id="ff80808177230a080177240e1fb40026" value="节点2" style="activityNode" parent="1" vertex="1">
                <mxGeometry x="460" y="338" width="100" height="48" as="geometry" />
            </mxCell>
            <mxCell id="ff80808177230a080177240e1ffc0027" value="" parent="1" source="ff8080817719a82b01771ef750e800f4" target="ff80808177230a080177240e1fb40026" edge="1">
                <mxGeometry relative="1" as="geometry" />
            </mxCell>
            <mxCell id="ff80808177230a080177240e200a0028" value="" parent="1" source="ff8080817719a82b01771ef750e800f4" target="ff8080817719a82b0177227a31560126" edge="1">
                <mxGeometry relative="1" as="geometry">
                    <Array as="points">
                        <mxPoint x="230" y="300" />
                    </Array>
                </mxGeometry>
            </mxCell>
            <mxCell id="ff8080817724354301772437a4ee0000" value="" parent="1" source="ff80808177230a080177240e1fb40026" target="ff8080817719a82b0177227a31480125" edge="1">
                <mxGeometry relative="1" as="geometry" />
            </mxCell>
        </root>
    </mxGraphModel>
    `
    // 流程图容器div
    const container = document.getElementById('container')
    // 流程图缩略图容器div
    const thumbnail = document.getElementById('thumbnail');
    // 节点操作者信息弹出div
    const nodeInfo = document.getElementById('nodeInfo');

    // 初始化流程图
    const graph = flowView.initFlowGraph({
        container,
        shadowColor: '#050505',
        flowedEdgeColor: '#525050',
        // 节点点击事件
        onClick: (id, left, top) => {
            nodeInfo.style.display = id ? 'block' : 'none'
            nodeInfo.style.left = left + 'px'
            nodeInfo.style.top = top + 'px'
            // 根据ID调用接口查询节点操作者信息
            // --todo
        },
        thumbnail
    });
    // 渲染流程图
    flowView.renderFlowGraph({
        graph,
        data,
        currentIds: ['ff80808177230a080177240e1fb40026'],
        flowedEdgeIds: ['ff8080817719a82b01771ef750e800f4', 'ff80808177230a080177240e1fb40026'],
    })
</script>
</body>
</html>
